<template>
  <v-form v-model="valid" ref="myOrderForm">
    <v-layout horizontal>
      <v-flex xs12 sm12 md12>
        <v-layout>
          <v-text-field v-model="Order.lsh" label="流水号" disabled required />
          <v-text-field v-model="Order.hh" label="货号" disabled required />
          <v-select
            v-model="Order.lx"
            :items="lxs"
            item-text="text"
            item-value="value"
            label="类型"
            required
            disabled
          ></v-select>
          <v-text-field v-model="Order.sl" label="数量" required disabled />
        </v-layout>
        <v-layout>
          <v-text-field v-model="Order.sdsj" label="送达时间" disabled />
          <v-text-field v-model="Order.driverName" label="司机" disabled />
          <v-text-field v-model="Order.pathName" label="路线" disabled />
          <v-text-field v-model="Order.statusInfo" label="状态" disabled />
        </v-layout>
        <v-layout>
          <v-text-field v-model="Order.contact" label="联系人" required disabled />
          <v-text-field v-model="Order.phone" label="联系方式" required disabled />
          <v-text-field v-model="Order.qwsj" label="送货时间" required disabled />
        </v-layout>

        <v-layout>
          <v-distpicker
            v-if="false"
            @province="province"
            @city="city"
            @area="area"
            :province="Order.province"
            :city="Order.city"
            :area="Order.district"
          ></v-distpicker>

          <v-text-field v-if="false" disabled>{{Order.province+''+Order.city+''+Order.district}}</v-text-field>

          <v-text-field v-model="Order.location" label="请输入详细地址" required disabled />
        </v-layout>

        <v-layout horizontal>
          <v-text-field v-model="Order.pinm" label="品名" disabled></v-text-field>
          <v-text-field v-model="Order.xingh" label="型号" disabled></v-text-field>
        </v-layout>
        <v-layout class="my-4" row>
          <v-spacer />
          <v-btn v-if="Order.status===1" color="primary" @click="cancel()">撤销</v-btn>
        </v-layout>
      </v-flex>
    </v-layout>
  </v-form>
</template>

<script>
export default {
  name: "Order-form",
  props: {
    oldOrder: {
      type: Object
    },
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      valid: false, //
      Order: {
        lrusername: "", //
        lsh: "", //
        id: "", //
        status: 0, //
        province: "",
        city: "",
        district: "",
        hh: "",
        sl: "",
        contact: "",
        phone: "",
        qwsj: "",
        statusInfo: ""
      },
      lxs: [
        { text: "正品", value: 0 },
        { text: "样机", value: 1 },
        { text: "赠品", value: 2 },
        { text: "残次", value: 3 }
      ],
      checkbox: false,
      drivers: [],
      paths: [],
      sp: {
        hh: "",
        pinm: "",
        chang: "",
        kuan: "",
        gao: "",
        zhongl: ""
      }
    };
  },
  methods: {
    cancel() {
      this.$http({
        method: "post",
        url: "item/xsth/revertgh",
        data: JSON.stringify(this.Order),
        headers: {
          "Content-Type": "application/json;charset=UTF-8"
        }
      })
        .then(res => {
          console.log(res);
        })
        .catch(err => {
          console.error(err);
        });
    }
  },
  watch: {
    oldOrder: {
      // 监控oldOrder的变化
      handler(val) {
        if (val) {
          // 注意不要直接复制，否则这边的修改会影响到父组件的数据，copy属性即可
          this.Order = Object.deepCopy(val);
          this.Order.statusInfo = "新增";
        } 
      },
      deep: true
    }
  }
};
</script>

<style scoped>
</style>
